<template>
  <footer>
    <van-tabbar v-model="active" active-color="orange">
      <van-tabbar-item badge="1" to="/shop/index">
        <span>首页</span>
        <template #icon="props">
          <img :src="props.active ? icon.active : icon.inactive" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/shop/classification">
        <span>分类</span>
        <template #icon="props">
          <img :src="props.active1 ? icon.active1 : icon.inactive1" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/shop/shopping">
        <span>购物车</span>
        <template #icon="props">
          <img :src="props.active2 ? icon.active2 : icon.inactive2" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item badge="3" to="/shop/my">
        <span>我的</span>
        <template #icon="props">
          <img :src="props.active3 ? icon.active3 : icon.inactive3" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </footer>
</template>

<script>
import { ref } from "vue";

export default {
  setup() {
    const active = ref(0);
    const icon = {
      active: "https://z3.ax1x.com/2021/07/18/W3hgts.png",
      inactive: "https://z3.ax1x.com/2021/07/18/W3hgts.png",
      active1: "https://z3.ax1x.com/2021/07/18/W3odUg.png",
      inactive1: "https://z3.ax1x.com/2021/07/18/W3odUg.png",
      active2: "https://z3.ax1x.com/2021/07/18/W3oD8s.png",
      inactive2: "https://z3.ax1x.com/2021/07/18/W3oD8s.png",
      active3: "https://z3.ax1x.com/2021/07/18/W3o5G9.png",
      inactive3: "https://z3.ax1x.com/2021/07/18/W3o5G9.png",
    };
    return {
      icon,
      active,
    };
  },
};
</script>

<style lang="less">
//  active-color="orange"
</style>
